<template>
  <div>
    <div>ref操作DOM</div>
    <hr>
    <div ref='target'>测试</div>
    <About ref='about' />
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
import { ref } from 'vue'
import About from './views/About.vue'

export default {
  name: 'App',
  components: { About },
  setup () {
    // 此处的target就是div的引用
    const target = ref(null)
    const about = ref(null)
    const handleClick = () => {
      console.log(target.value.innerHTML)
      about.value.showInfo()
    }
    return { target, about, handleClick }
  }
}
</script>
